HTML 特定语义元素

下面是一个 结合 grid/flexbox 布局的网站主界面示例


<head>
  <style>

  body {
    height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows:  auto 1fr auto;
    grid-template-columns: 100%;
  }

  .nav {
    background: #218a8a;
    color:white;
    padding: 1rem;
  }

  .main {
    background: whitesmoke;
    color: #444;
    padding: 1rem;
  }

  .footer {
    background: #e0e0e0;
    padding: 1rem;
    text-align:center
  }
  </style>
</head>

<body>
  
  <div class='nav'>
    导航栏
  </div>

  <div class='main'>
    
    <strong>这里是主体内容.</strong>
    <pre>
    1
    2
    4
    1
    2
    4
    </pre>
  </div>

  <div class='footer'>
    白月黑羽版权所有 
    <br>
    <small>2020-2022 @copy rights reserved</small>
  </div>
</body>


导航栏、主体部分、页脚 这些典型的界面组成部分都是用 div 元素表示的。

div 只是告诉浏览器如何显示这个元素，但是这个元素在这个网页中的地位、含义，是导航栏、还是主体部分、页脚？ 这些浏览器是不知道的


而HTML5规范 对这些界面的组成部分，都有专门对应的元素。

比如

nav 是导航栏元素

main 是界面主体元素

foot 是页脚元素


虽然使用这些元素本身，有时并不能带来任何视觉上的特别改变（视觉呈现往往还是要靠CSS），

但是这些元素代表专有的含义，合理的使用这些元素，对界面的可读性，搜索引擎SEO都有特别的好处，称之为 语义元素（Semantic Elements）

我们应该尽量使用这些元素，而不是一股脑都用 div 。


上例的例子中，导航栏、主体部分、页脚 应该分别用 nav、main、foot 来替换，就是这样


<head>
  <style>

  body {
    height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows:  auto 1fr auto;
    grid-template-columns: 100%;
  }

  nav {
    background: #218a8a;
    color:white;
    padding: 1rem;
  }

  main {
    background: whitesmoke;
    color: #444;
    padding: 1rem;
  }

  footer {
    background: #e0e0e0;
    padding: 1rem;
    text-align:center
  }
  </style>
</head>

<body>
  
  <nav>
    导航栏
  </nav>

  <main>
    
    <strong>这里是主体内容.</strong>
    <pre>
    1
    2
    4
    1
    2
    4
    </pre>
  </main>

  <footer>
    白月黑羽版权所有 
    <br>
    <small>2020-2022 @copy rights reserved</small>
  </footer>
</body>

header/aside/section/article

常见的语义元素还有： header / aside / section / article

  • header

    header 元素（注意不是head）用于展示网页整体介绍

    通常位于网页顶部

    比如 标题、Logo、搜索框、作者名称，等等。

    有的网站会把 nav 也包含在 header里面，有的网站 nav位于header的下面

  • article

    通常 新闻、博客、论坛 这种 文章类页面，一个 article 元素 对应 一篇文章

    article 元素通常放在 main 元素里面

  • section

    对应界面内容中的一个部分（或者说一个主题区），比如

    文章里面有可以有几个部分，对应几个section


      <article>
  <h1>选购笔记本电脑指南</h1>
  <section>
      <h2>说明</h2>
      <p>本文档帮助你根据自己的需求挑选笔记本电脑</p>
  </section>

  <section>
      <h2>准则</h2>
      <p>
        选择笔记本电脑，需要根据你自身的情况来决定
        包括你的预算、常用应用程序、是否经常外带使用 等等...
      </p>
  </section>
  
  </article>

  • aside

    aside通常放置一些 和文章当前部分不直接相关的内容，但有一定的参考旁白说明意义的内容

    比如


      <head>
    <style>

    body {
      height: 100vh;
      margin: 0;
      display: grid;
      grid-template-rows:  auto 1fr auto;
      grid-template-columns: 100%;
    }

    nav {
      background: #218a8a;
      color:white;
      padding: 1rem;
    }

    main {
      background: whitesmoke;
      color: #444;
      padding: 1rem;
    }

    footer {
      background: #e0e0e0;
      padding: 1rem;
      text-align:center
    }

    aside {
      width: 40%;
      padding-left: .5rem;
      margin-left: .5rem;
      float: right;
      box-shadow: inset 5px 0 5px -5px #29627e;
      font-style: italic;
      color: #29627e;
      }

      aside > p {
          margin: .5rem;
      }

      p {
          font-family: 'Fira Sans', sans-serif;
      }
    </style>
  </head>

  <body>
    
    <nav>
      导航栏
    </nav>

    <main>
    <p>蝾螈是一组具有蜥蜴样外观的两栖动物，包括幼虫和成虫形式的短腿和尾巴。</p>

  <aside>
      <p>粗皮蝾螈用致命的神经毒素保护自己。</p>
  </aside>

  <p>几种蝾螈栖息在太平洋西北部的温带雨林中，包括 Ensatina、西北蝾螈和粗皮蝾螈。 
      大多数蝾螈是夜间活动的，捕食昆虫、蠕虫和其他小动物。</p>
    </main>

    <footer>
      白月黑羽版权所有 
      <br>
      <small>2020-2022 @copy rights reserved</small>
    </footer>
  </body>